<template>
    <div class="usercard">
        <div class="usercard-item active">
            <div style="color:#FFFFFF" class="top">商户付费</div>
            <div class="bom">
                <div class="left">
                    <span style="color:#FFFFFF">购买小程序的费用</span>
                    <span style="color:#FFFFFF"  class="strong">50000</span>
                </div>
                <div class="right">
                    <span style="color:#FFFFFF">授权码价值</span>
                    <span  style="color:#FFFFFF"  class="strong">123465</span>
                </div>
            </div>
        </div>
        <div class="usercard-item">
            <div class="top">
                平台用户注册数
                 <img src="@/assets/css/yingxiao/矢量智能对象(5).png" alt="">

            </div>
            <div class="bom">
                <div class="left">
                    <span>今日</span>
                    <span class="strong">50000</span>
                </div>
                <div class="right">
                    <span>本月</span>
                    <span class="strong">123465</span>
                </div>
                <div class="right">
                    <span>本年度</span>
                    <span class="strong">123465</span>
                </div>
            </div>
        </div>
        <div class="usercard-item">
            <div class="top">
                商户数增长
                  <img src="@/assets/css/yingxiao/矢量智能对象(7).png" alt="">
            </div>
            <div class="bom">
                <div class="left">
                    <span>今日</span>
                    <span class="strong">50000</span>
                </div>
                <div class="right">
                    <span>本月</span>
                    <span class="strong">123465</span>
                </div>
                <div class="right">
                    <span>本年度</span>
                    <span class="strong">123465</span>
                </div>
            </div>
        </div>
        <div class="usercard-item">
              <div class="top">
                  小程序消费金额
                   <img src="@/assets/css/yingxiao/矢量智能对象(6).png" alt="">
                  </div>
            <div class="bom">
                <div class="left">
                    <span>今日</span>
                    <span class="strong">50000</span>
                </div>
                <div class="right">
                    <span>本月</span>
                    <span class="strong">123465</span>
                </div>
                <div class="right">
                    <span>本年度</span>
                    <span class="strong">123465</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="less" scoped>
.usercard {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    justify-content: space-around;
    align-content: space-around;
    //  padding-top: 50px;
    .usercard-item {
        color: #333333;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        width: 48%;
        height: 48%;
        border: 1px solid #009481;
        // background-color: #009380;
        .top {
            height: 50%;
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding-left: 43px;
             img {
                 padding-right: 20px;
             }
            
        }
        .bom {
            display: flex;
            justify-content: space-around;
            height: 50%;
            .left {
                display: flex;
                 flex-direction: column;
            }
            .right {
                 display: flex;
                 flex-direction: column;
            }
        }
    }
    & .usercard-item:nth-last-of-type(4) {
        border: 0!important;
    }
     .strong {
               font-weight: 900;
               color: #333333;
             }
}
.active {
    background: url('~@/assets/css/yingxiao/milad-fakurian-E8Ufcyxz514-unsplash 拷贝@2x.png');
    background-size: 100% 100%;
}

</style>